<template>
	<view class="board">
		<view>
			<image class="img" src="@/static/img/board.jpg" mode="widthFix"></image>
		</view>
		<view class="board-contont">
			<Board :comment="msgList" @replayMsg="replayMsg"/>
		</view>
		<view class="board-input">
			<tn-input
				ref="inputRef"
				class="board-input_input"
				v-model="value"
				:type="inputObj.type"
				:focus="inputObj.focus"
				border
				showConfirmBar
				showRightIcon
				@blur="inputBlur"
				:placeholder="inputObj.placeholder" />
				<view class="board-input_button">
					<tn-button backgroundColor="tn-main-gradient-indigo" shape="round" @click="postComments">发表</tn-button>
				</view>
		</view>
		<tn-toast ref="toast"></tn-toast>
	</view>
</template> 

<script>
import Board from "@/components/board/comment.vue"
import { getDataTime } from "@/utils/validate.js"
export default {
	props:['tab'],
	components:{Board},
	data() {
		return {
			msgList:[],
			value:'',
			inputObj:{
				placeholder:'快来发表留言吧๑乛◡乛๑',
				type:'textarea',
				focus:false
			},
			replayInfo:{}
		};
	},
	mounted() {
		this.getLeavemsg()
	},
	watch:{
		tab(newVal, oldVal){
			if(newVal == 2){
				this.getLeavemsg()
			}
		}
	},
	methods: {
		getLeavemsg(){
			uni.showLoading({
				title: '加载中'
			});
			let obj = {
				pageNo: 1,
				pageSize: 1000
			}
			this.$api.getLeavemsg(obj).then(res => {
				if(res.code == 200){
					this.msgList =res.data
					uni.hideLoading();
				}
			})
		},
		//点击回复
		replayMsg(item) {
			this.replayInfo = item
			this.inputObj.placeholder = `回复  @${item.author}`
			this.inputObj.focus = true
		},
		//输入框失去焦点
		inputBlur(){
			uni.onKeyboardHeightChange(res => {
				if(res.height == 0){
					this.inputObj.placeholder = `快来发表留言吧๑乛◡乛๑`
					this.inputObj.focus = false
					this.replayInfo = {}
				}
			})
		},
		//发表评论
		postComments(){
			let info = {}
			let adrr = uni.getStorageSync('adrr');
			let userInfo = uni.getStorageSync('userInfo');
			uni.getSystemInfo({
				success: function (res) {
					info = res
				}
			});
			if( !userInfo ){
				this.$refs.toast.show({
					title: '提示',
					content: '您还未登录，请先登录',
					icon: 'close-fill',
					image: '',
					duration: 5000
				})
				return false
			}
			let obj = {
				address:adrr.city,
				author:userInfo.userName,
				avatar:userInfo.avatar,
				browser:info.browserName == 'chrome'?'#icon-chrome':'#icon-Safari',
				createTime:getDataTime(),
				ip:adrr.ip,
				isblogger:userInfo.isBlogger,
				pId:this.replayInfo?this.replayInfo.id:null,
				pName:this.replayInfo?this.replayInfo.userName:null,
				rId:this.replayInfo?this.replayInfo.rId:null,
				system:info.osName == 'android'?'#icon-anzhuo':'#icon-ios',
				text:this.value
			}
			let obj1 = {
				address:adrr.city,
				author:userInfo.userName,
				avatar:userInfo.avatar,
				browser:info.browserName == 'chrome'?'#icon-chrome':'#icon-Safari',
				createTime:getDataTime(),
				ip:adrr.ip,
				isblogger:userInfo.isBlogger,
				system:info.osName == 'android'?'#icon-anzhuo':'#icon-ios',
				text:this.value
			}
			if(JSON.stringify(this.replayInfo) == '{}'){
				this.$api.addLeavemsg(obj1).then(res => {
					this.getLeavemsg()
					this.inputObj.placeholder = `快来发表留言吧๑乛◡乛๑`
					this.inputObj.focus = false
					this.replayInfo = {}
				})
			} else {
				this.$api.addLeavecomment(obj).then(res => {
					if(res.code == 200){
						this.getLeavemsg()
						this.inputObj.placeholder = `快来发表留言吧๑乛◡乛๑`
						this.inputObj.focus = false
						this.replayInfo = {}
					}
				})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.img{
	width: 100%;
}
.board{
	&-contont{
		padding: 20rpx 40rpx 180rpx 40rpx;
	}
	&-input{
		padding: 20rpx 40rpx 60rpx 40rpx;
		display: flex;
		align-items: flex-start;
		background-color: #fff;
		position: fixed;
		bottom: 80rpx;
		width: 100%;
		z-index: 0;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
		&_button{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-left: 20rpx;
		}
		&_icon{
			font-size: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			&--item{
				display: flex;
				flex-direction: column;
				margin-right: 80rpx;
				text{
					position: relative;
				}
				&__text{
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>
